<template>
	<view ref="company">
		<view>
		<view v-if="customerList != ''">
			<checkbox-group @change="checkboxChange">
				<uni-card :is-shadow="false" v-for="(item,index) in customerList" :key="index" @click="detail(item)">
					<view class="flex_between">
					<p class="grid-integral">企业名称：{{ item.name }}
						<companyGreen v-if="item.isCertify == 1" class="certiyImg" />
						<companyGray v-if="item.isCertify == 0" class="certiyImg" />
					</p>
					<view @click.stop>
					<checkbox style="transform:scale(0.7)" color="#00a660" :value="item.id.toString()"
					          :checked="item.checked"/>
							  </view>
					</view>		  
					<p class="grid-integral">企业法人：{{ item.leader }}</p>
					<p class="grid-integral">统一社会信用代码：{{ item.creditCode }}</p>
					<p class="grid-integral">对公账户：<span v-if="item.account == null || item.bankName == null"
							style="color: #ff4949;">未完善</span>
						<span v-else style="color: #00a660;" v-clipboard:copy="' 企业对公账户信息：'
			                                       + '\n 开户银行名称：' + item.bankName
			                                       + '\n 开户支行名称：' + ((item.bankSonName == null) ? '' : item.bankSonName)
			                                       + '\n 企业账户名称：' +item.name
			                                       + '\n 企业银行账号：' + ((item.account == null) ? '' : item.account)"
							v-clipboard:success="clipboardSuccess">已完善（点击复制）</span>
					</p>
					<p class="grid-integral">发票信息：<span v-if="item.invoice == null || item.bankName == null"
							style="color: #ff4949;">未完善</span>
						<span v-else style="color: #00a660;"
							v-clipboard:copy="' 企业发票信息：'
			                                       + '\n\n 发票类型：' + ((scope.row.invoiceType == 0)? '增值税普通发票' : '增值税专用发票')
			                                       + '\n\n 发票抬头：' + scope.row.name
			                                       + '\n 企业税号：' + scope.row.creditCode
			                                       + '\n\n 开户银行名称：' + scope.row.bankName
			                                       + '\n 企业银行账号：' + ((scope.row.account == null) ? '' : scope.row.account)
			                                       + '\n\n 企业邮箱账号：' + ((scope.row.email == null) ? '' : scope.row.email)
			                                       + '\n 企业联系电话：' + ((scope.row.invoiceTelephone == null) ? '':scope.row.invoiceTelephone)
			                                       + '\n 企业所在地址：' + ((scope.row.invoiceAddress == null) ? '' : scope.row.invoiceAddress)"
							v-clipboard:success="clipboardSuccess">已完善（点击复制）</span>
					</p>
					<p class="grid-integral">企业员工：<span style="color: #00a660;">{{ item.staffNum }}人</span></p>
					<p class="grid-integral">客户类别：
					<template v-for="(dictItem, index) in dicts.ec_customer_type">
					  <template v-if="item.customerType == dictItem.value">
					    <uni-tag :text="dictItem.text" size="small" :type="dictItem.type"/>
					  </template>
					</template>
					</p>
					<view slot="actions" class="card-actions" style="padding: 0 20rpx;">
						<view>黑名单：
						<span @click.stop="switchChange(item)">
							<switch color="red" style="transform:scale(0.7)" :checked="item.status == 1 ?true:false"
								disabled />
						</span></view>
						<view class="flex_between">
						<view class="card-actions-item" @click.stop="handleEdit(item)">
						  <text class="card-actions-item-text themeColor">修改</text>
						</view>
					  <view class="card-actions-item" @click.stop="handleDelete(item)" style="margin-right: 0;">
					    <text class="card-actions-item-text errorColor">删除</text>
					  </view>
					  </view>
					</view>
			</uni-card>
			</checkbox-group>
			<!-- 加载更多 -->
			<uni-load-more color="#00a660" :status="loadStatus" />
		</view>
		<!-- 暂无数据 -->
		<luanqingEmpty :show="true" text="没有更多数据啦" v-else />
		</view>
		
		<!-- 底部全选/合并开票 -->
		<view class="foot-menu flex_between">
		  <checkbox-group @change="checkboxAllChange">
		    <label>
		      <checkbox
		          style="transform:scale(0.7)"
		          color="#00a660"
		          :checked="allFlag.checked"
		          :value="allFlag.cb"/>
		      全选
		    </label>
		  </checkbox-group>
		  <view>
		    <button size="mini" class="red_btn" :disabled="multiple" @click="handleDelete()">批量删除</button>
		  </view>
		</view>
	</view>
</template>

<script>
	import {getDictsByNameForUni} from "@/utils/dicts";
	import companyGray from "@/components/svg/companyGray"
	import companyGreen from "@/components/svg/companyGreen"
	import personalGray from "@/components/svg/personalGray"
	import personalGreen from "@/components/svg/personalGreen"
	import {
		changeStatus,
		delCustomerCompany,
		listCustomerCompany,
		getCustomerCompany
	} from "@/api/ec/work/customer/customerCompany";
	import luanqingEmpty from '@/components/luanqing-empty/luanqing-empty';
	export default {
		name: "customerPerson",
		components: {
			luanqingEmpty,
			companyGray,
			personalGray,
			personalGreen,
			companyGreen,
		},
		props: {
			// 查询参数
			findApi: {
				type: String,
				default: null
			},
		},
		data() {
			return {
				// 全选框
				allFlag: {
				  value: 'cb',
				  checked: false
				},
				// 选中数组
				ids: [],
				// 非多个禁用
				multiple: true,
				// 数据字典
				dicts: {
				  ec_customer_type: [],
				},
				total: 0, //总条数
				loadStatus: 'loading', //是否加载中 //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				customerList: [], //个人客户
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					name: null,
					customerType: null,
					createName: null,
					params: {
						lookSelf: 1,
					},
				},
			}
		},
		created() {
			// this.getDicts();
			// 从详情页返回该页面的获取数据
			uni.$on('refreshData', () => {
				this.getList();
			})
		},
		methods: {
			/** 全选复选框的checkbox-group  changge事件 */
			checkboxAllChange(e) {
			  // 选中的选项数据
			  let selection = [];
			  // 取消全选
			  if (e.detail.value.length == 0) {
			    this.customerList.map(item => this.$set(item, 'checked', false));
			    this.$set(this.allFlag, 'checked', false);
			    selection = [];
			  } else {
			    // 全选
			    this.customerList.map(item => {
			      this.$set(item, 'checked', true);
			      selection.push(item);
			    });
			    this.$set(this.allFlag, 'checked', true);
			  }
			  this.handleSelectionChange(selection);
			},
			/** 复选框组合的checkbox-group  changge事件*/
			checkboxChange(e) {
			  let items = this.customerList;
			  let values = e.detail.value;
			  for (let i = 0, lenI = items.length; i < lenI; ++i) {
			    const item = items[i];
			    if (values.includes(item.id.toString())) {
			      this.$set(item, 'checked', true);
			    } else {
			      this.$set(item, 'checked', false);
			    }
			  }
			  // 是否全部勾选，判断全选与否状态
			  let offCarArr = [];
			  this.customerList.forEach(item => offCarArr.push(item));
			  let allChecks = offCarArr.every(item => item.checked == true);
			  allChecks ? this.$set(this.allFlag, 'checked', true) : this.$set(this.allFlag, 'checked', false);
			
			  // 选中的选项数据
			  let selection = [];
			  this.customerList.forEach(item => (item.checked) ? selection.push(item) : '');
			  this.handleSelectionChange(selection);
			},
			/** 多选框选中数据 */
			handleSelectionChange(selection) {
			  this.ids = selection.map(item => item.id);
			  this.multiple = !selection.length;
			},
			/**加载数据字典*/
			getDicts() {
			  this.dicts.ec_customer_type = getDictsByNameForUni("ec_customer_type");
			},
			/** 复制代码成功 */
			clipboardSuccess() {
				this.$modal.msgSuccess("复制成功");
			},
			/** 查看详情 */
			detail(item) {
				// type == 0 修改新增 1查看详情 
				getCustomerCompany(item.id).then((response) => {
					let form = response.data
					uni.navigateTo({
						url: './companychangeView?item=' + JSON.stringify(form) + '&type=' + 1
					})
				})
			},
			/** 黑名单 */ 
			switchChange(item) {
				let text = item.status == 1 ? "移除" : "加入";
				var that = this
				uni.showModal({
					title: '系统提示',
					confirmColor: '#00a660',
					content: '该企业加入到黑名单后，企业下所有成员将自动 " ' + text + ' " 黑名单，是否继续操作！',
					success: function(res) {
						if (res.confirm) {
							let statusEx = item.status == 1 ? 0 : 1;
							const param = {
								id: item.id,
								status: statusEx
							}
							changeStatus(param).then(response => {
								that.getList(true)
								uni.showToast({
									title: text + '黑名单成功'
								});
							})
						} else if (res.cancel) {}
					}
				});
			},
			/** 修改 */
			handleEdit(item) {
				// type == 0 修改新增 1查看详情
				getCustomerCompany(item.id).then((response) => {
					let form = response.data
					uni.navigateTo({
						url: './companychangeView?item=' + JSON.stringify(form) + '&type=' + 0
					})
				})	
			},
			/** 删除 */
			handleDelete(item){
				uni.showModal({
					title: '系统提示',
					confirmColor: '#00a660',
					content: '确定要删除该企业客户吗？ 删除后数据不可恢复，是否确认删除？',
					success: function(res) {
						if (res.confirm) {
							const ids = (!!item) ? item.id : this.ids;
							delCustomerCompany(ids);
							this.getList(true)
							uni.showToast({
								title: '删除成功'
							});
						} else if (res.cancel) {}
					},
				})
			},
			/** 企业客户 */
			getList(reload) {
			  if (reload) {
			    this.queryParams.pageNum = 1;
			    this.loadStatus = 'more'
          this.$modal.loading();
			  }
			  this.queryParams.params.findApi = this.findApi;
			  listCustomerCompany(this.queryParams).then(response => {
			    if (reload) {
			      uni.hideLoading()
			    }
				this.getDicts()
			    this.total = response.total;
			    if (response.total > 0) {
			      const dataRows = response.rows;
			      this.customerList = reload ? dataRows : this.customerList.concat(dataRows);
			    } else {
			      this.customerList = [];
			    }
			    // 判断数据是否加载完全
			    if (response.total <= this.customerList.length) {
			      this.loadStatus = 'noMore'
			    }
			    // 页数+1
			    this.queryParams.pageNum++
			  }).catch(() => {
			    if (reload) {
			      uni.hideLoading()
			    }
			  });
			},
			/** 上拉刷新回调 */
			loadMore() {
			  if (this.loadStatus != 'noMore' && this.total > this.customerList.length) {
			    this.loadStatus = 'loading';
			    // 延迟500毫秒显示loading效果 
			    setTimeout(() => {
			      // 执行查询的方法 
			      this.getList(false);
			    }, 500)
			  } else {
			    // 停止加载
			    this.loadStatus = 'noMore'
			  }
			},
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .uni-card .uni-card__content{
		padding-bottom: 0 !important;
	}
	.certiyImg {
		width: 26rpx;
		height: 26rpx;
		margin-left: 3rpx;
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 8rpx;
	}
	
	.foot-menu {
	  width: 100%;
	  height: 100rpx;
	  background: #fff;
	  position: fixed;
	  padding: 0 25rpx;
	  bottom: 0; /**距离底部为0*/
	  left: 0;
	  z-index: 1;
	  border-top: 2rpx #ebeef5 solid;
	  display: flex;
	}
</style>
